
window.onload = function () {
    // 选项卡
    select();
    function select() {
        var aArr = document.querySelectorAll(".det-goo-top a");
        var divArr = document.querySelectorAll('.det-hide div');
        aArr.forEach((item, index) => {
            console.log(item, index);
            aArr[index].onclick = function () {
                divArr.forEach((item, index) => {
                    divArr[index].style.display = "none";
                    aArr[index].style.borderBottom = 'none';
                })
                divArr[index].style.display = "block";
                aArr[index].style.borderBottom = "3px solid #FF734C";
            }
        })
    }
}
// 详情
// 获取页面url中的id
var obj = new URLSearchParams(location.search);
var pid = obj.get('id');
// console.log(pid);
/*
 接口地址：http://jx.xuzhixiang.top/ap/api/detail.php
    接口请求方式：get
    接口参数：
    id  商品的id
    使用方式
    获取id为1的商品的详情
    http://jx.xuzhixiang.top/ap/api/detail.php?id=1
*/
var url = 'http://jx.xuzhixiang.top/ap/api/detail.php';
axios.get(url, { params: { id: pid } }).then(res => {
    // console.log(res);
    var data = res.data.data;
    var str = '';
    str += `
            <div class="det-left">
                <img src="${data.pimg}" alt="">
            </div>
            <div class="det-right">
            <div class="det-rig-one">
                <span>${data.pname}</span>
                <p>[暖阳系列新品上市] ${data.pdesc}</p>
            </div>
            <div class="det-rig-two">
                <span>售价：</span>
                <span>${data.pprice}</span>
                <span>市场价：￥<del>399</del></span>
            </div>
            <ul class="det-rig-th">
                <li>材料：${data.pdesc}</li>
                <li>花语：你逆光而来，配得上这世间所有的温柔美好</li>
                <li>附送：免费附送精美贺卡，代写您的祝福。(您下单时可填写留言栏)</li>
                <li>配送：全国 （可配送至全国1000多个城市，市区免配送费）</li>
                <li>说明：由于鲜花包扎各地的花艺师不同，可能在花束的形式和搭配上与图片不完全一致，但我们保证鲜花的</li>
                <li>主花材品种、新鲜程度、数量、颜色与说明一致，谢谢。</li>
            </ul>
            <div class="det-rig-fo">
               <div class="num">
                <button onclick="minus()">—</button>
                <input type="text" id="num" value="1" min="1">
                <button onclick="add()">+</button>
                </div>
            </div>
           <ul class="det-rig-fi">
               <li><button onclick="addCar()">加入购物车</button></li>
               <li><button>立即购买</button></li>
               <li><a href="#">收藏心愿商品</a></li>
           </ul>
        </div>  
            `;
    document.querySelector('.details').innerHTML = str;
})

// 加入购物车
/*
  接口地址：http://jx.xuzhixiang.top/ap/api/add-product.php
      接口请求方式：get
      接口参数：
          uid  用户id
          pid  商品id
          pnum  要添加的商品数量
  */
function addCar() {
    // 获取uid
    var uid = localStorage.getItem('id');
    // console.log(uid);
    // 获取数量
    var pnum = document.querySelector('#num').value;
    // console.log(pnum);
    var carUrl = 'http://jx.xuzhixiang.top/ap/api/add-product.php';
    axios.get(carUrl, { params: { uid, pid, pnum } }).then(res => {
        if (res.data.msg == '插入成功' || uid != null) {
            alert('已加入购物车');
            location.href = "goodsCar.html";
        } else {
            alert('请登录或注册')
            location.href = "register.html";
        }
    })
}
// 加入购物车的数量
function minus() {
    if (num.value <= 1) {
        num.value = 1;
        alert("商品不能小于1哦");
    } else {
        num.value = parseInt(num.value) - 1;
    }
}
function add() {
    num.value = parseInt(num.value) + 1;
}
// 回到顶部
window.onscroll = function () {
    var tops = document.querySelector("#top");
    tops.onclick = function () {
        document.documentElement.scrollTop = 0;
    }
}
